<template>
	<view>
		<view class="" style="padding-bottom: 80px;background-color: #3B7CFA;">
			<image src="/static/dianxin.jpg" mode="widthFix"></image>

			<view class="css-tag">
				①首充50元送120元话费(专属渠道):充值50元万能专款立即到账，120元赠费次月起分12个月返还，月返10元/月
				<br>
				②激活参加充值活动后3个工作日内店铺赠送100G通用流量/月+100分钟全国通话/月，流量、通话当月清零、副卡不共享。
			</view>
			<view style="font-size: 18px;font-weight: bold;text-align: center;color: #fff;margin: 10px 0;">
				—— 购买须知 ——
			</view>
			<view class="css-content">
				<view style="color: #fff;font-weight: bold;line-height: 22px;">
					1、本套餐号码及归属地均随机。流量及语音收费全国统一价,无漫游费。
					<br>
					2、本套餐一个证件只能办理一张，到货后请订购人持身份证原件在快递专员处进行激活和充值。
				</view>
				<view style="color: #eee;line-height: 22px;">
					3、据国家相关规定，该产品用户办理年龄为18-60周岁，激活卡后请确保为本人使用，不得转借、出租给他人使用，否则机主本人承担法律责任。
					<br>
					4、不发货地区:北京、辽宁、黑龙江、云南、新疆、西藏。
					<br>
					5、激活首月扣全部月租，享全部套餐内容，每月25号之后的订单，建议用户次月激活。
					<br>
					6、其他不符合发货条件的订单，根据实际情况,我们保留不发货的权利。
					<br> 7、本页面所有内容解释权归中国电信所有，包括但不限于套餐名称、套餐资费、副卡资费、营销活动等。
					<br>
					9、引流产品为线上临时促销产品，因生产流程原因部分产品老用户无法
					办理，无法添加副卡。
				</view>
			</view>

		</view>

		<view class="css-submit" @click="show = true">
			免费领取
		</view>
		<!-- 返回 -->
		<!-- <view class="css-back" @click="handleBack" v-if="form.dataSource == '基楚'">
			<image src="../../static/back.png" mode="aspectFit" style="width: 100%;height: 100%;"></image>
		</view> -->

		<!-- 免费领取弹窗 -->
		<u-popup :show="show" round="8px" mode="center" :closeable="true" :closeOnClickOverlay="false"
			@close="handleAllPopCloase">
			<view class="pop-box">
				<view style="text-align: center;font-size: 16px;font-weight: bold;margin-bottom: 10px;">
					下单办理
				</view>
				<u--form labelPosition="left" ref="uForm" labelWidth="80">
					<u-form-item label="入网姓名:" prop="userInfo.name" borderBottom ref="item1">
						<u--input v-model="form.custName" border="surround" placeholder="请输入入网人姓名"></u--input>
					</u-form-item>
					<u-form-item label="身份证号:" prop="userInfo.name" borderBottom ref="item2">
						<u--input v-model="form.idNum" maxlength="18" type="idcard" border="surround"
							placeholder="请输入入网人身份证号码"></u--input>
					</u-form-item>
					<u-form-item label="收货人:" prop="userInfo.name" borderBottom ref="item3">
						<u--input v-model="form.recipientName" border="surround" placeholder="请输入收货人姓名"></u--input>
					</u-form-item>
					<u-form-item label="联系电话:" prop="userInfo.name" borderBottom ref="item3">
						<u--input v-model="form.phoneNum" maxlength="11" type="number" border="surround"
							placeholder="请输入收货联系电话"></u--input>
					</u-form-item>
					<u-form-item label="收货地:" prop="userInfo.name" borderBottom ref="item3" @click="cityChange">
						<u--input v-model="form.address" readonly Color="#ffffff" placeholder="请选择收货地" border="surround"
							style="pointer-events:none">
							<template slot="suffix">
								<u-icon slot="right" name="arrow-right"></u-icon>
							</template>
						</u--input>
					</u-form-item>
					<u-form-item label="详细地址:" prop="userInfo.name" borderBottom ref="item4">
						<u--input v-model="form.custAddress" border="surround" placeholder="请输入收货详细地址"></u--input>
					</u-form-item>
				</u--form>

				<view class="css-agreement">
					<view class="css-img" @click="isCkeck = !isCkeck">
						<image src="/static/check_n.png" mode="aspectFit" style="width: 100%;height: 100%;"
							v-if="isCkeck == false"></image>
						<image v-else src="/static/check_pre.png" mode="aspectFit" style="width: 100%;height: 100%;">
						</image>
					</view>
					<span class="css-text" style="margin-left: 25px;">
						我已阅读并同意
					</span>
					<span @click="handleAgreement(1)" class="css-text css-check" style="color: blue;">
						《合规使用手机卡告知书》
					</span>
					<span @click="handleAgreement(2)" class="css-text css-check" style="color: blue;">
						《客户入网服务协议及业务协议》
					</span>
					<span @click="handleAgreement(3)" class="css-text css-check" style="color: blue;">
						《关于客户个人信息收集、使用规则的公告》
					</span>
				</view>

				<view class="pop-btn" @click="clickSubmit">
					提交
				</view>
			</view>
		</u-popup>

		<u-popup :closeable="true" round="8px" :show="showAgreement" mode="center" @close="showAgreement = false">
			<view class="pop-agreement">
				<view class="title">
					{{ popTitle }}
				</view>
				<view class="content">
					{{ popContent }}
				</view>
			</view>

		</u-popup>

		<u-toast ref="uToast"></u-toast>
		<pcaPicker ref="pcaPicker" @confirm="getPCA"></pcaPicker>

	</view>
</template>

<script>
	import {
		xinxi,
		ruwang,
		gaozhi
	} from "../cardDetail/new_file.js";

	export default {
		data() {
			return {
				show: false,
				showPicker: false,
				isCkeck: true,
				showAgreement: false,
				form: {
					custName: "", // 入网姓名
					idNum: "", // 入网身份证号
					recipientName: "", // 收货人姓名
					phoneNum: "", // 收货人电话
					custAddress: "", // 收货人地址
					dataSource: "电信", // 基楚  兴荣
					address: ""
				},
				popTitle: "",
				popContent: "",
				columns: [
					["禁发", "黑龙江", "辽宁", "北京", "云南", "新疆", "西藏"]
				]
			}
		},
		methods: {
			cityChange(e) {
				this.$refs.pcaPicker.show();
			},
			getPCA(e) {
				this.form.address = e.province + e.city + e.country;
			},
			handlePickerConfirm(e) {
				console.log(e.value);
				this.form.address = e.value[0];
				this.handlePickerClose();
			},
			handlePickerClose() {
				this.showPicker = false;
			},
			handleAllPopCloase() {
				this.showAgreement = this.showPicker = this.show = false;
			},
			// 协议 勾选
			handleCheck() {
				this.isCkeck = !this.isCkeck;
			},
			// 回到首页
			handleBack() {
				uni.reLaunch({
					url: "/pages/home/home"
				})
			},
			// 提交
			clickSubmit() {
				if (this.isCkeck == false) {
					uni.showToast({
						title: "请阅读并同意相应协议!",
						icon: "none"
					})
					return;
				}
				if (this.form.custName.length <= 0) {
					uni.showToast({
						title: "请输入入网人姓名!",
						icon: "none"
					})
					return;
				}
				let rename = /^(?:[\u4e00-\u9fa5·]{2,16})$/;

				if (rename.test(this.form.custName) == false) {
					uni.showToast({
						title: "入网人姓名格式错误!",
						icon: "none"
					})
					return;
				}

				let req = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/;
				if (req.test(this.form.idNum) == false) {
					uni.showToast({
						title: "身份证号码错误!",
						icon: "none"
					})
					return;
				}
				if (this.form.recipientName.length <= 0) {
					uni.showToast({
						title: "请输入收货人姓名!",
						icon: "none"
					})
					return;
				}
				if (rename.test(this.form.recipientName) == false) {
					uni.showToast({
						title: "收货人姓名格式错误!",
						icon: "none"
					})
					return;
				}
				if (this.form.phoneNum.length <= 0) {
					uni.showToast({
						title: "请输入收货联系电话!",
						icon: "none"
					})
					return;
				}
				let res1 = /^(?:(?:\+|00)86)?1\d{10}$/;
				console.log(res1.test(this.form.phoneNum));
				if (res1.test(this.form.phoneNum) == false) {
					uni.showToast({
						title: "手机号格式错误!",
						icon: "none"
					})
					return;
				}
				if (this.form.address.length <= 0) {
					uni.showToast({
						title: "请选择收货地!",
						icon: "none"
					})
					return;
				}
				if (this.form.custAddress.length <= 0) {
					uni.showToast({
						title: "请输入收货详细地址!",
						icon: "none"
					})
					return;
				}
				let address = ["黑龙江", "辽宁", "北京", "云南", "新疆", "西藏"];
				for (var i = 0; i < address.length; i++) {
					if (this.form.custAddress.includes(address[i]) == true) {
						uni.showToast({
							title: "暂不支持此地区!",
							icon: "none"
						})
						return;
					}
				}


				// const baseURL = "http://118.195.148.124:18091"; // 生产 pro_gdapp_h5
				const baseURL = "http://82810099.com:18093"; //  pro_gdapp_h5

				this.form.custAddress = this.form.address + this.form.custAddress;

				uni.request({
					url: baseURL + "/order/order/add",
					data: this.form,
					method: "POST",
					success: (res) => {
						console.log(res);
						uni.showToast({
							title: "领取成功!",
							icon: "success"
						})
						this.form = {
							custName: "", // 入网姓名
							idNum: "", // 入网身份证号
							recipientName: "", // 收货人姓名
							phoneNum: "", // 收货人电话
							custAddress: "", // 收货人地址
							dataSource: "电信", // 基楚  兴荣
							address: ""
						};
						this.show = false;
					},
					fail: (err) => {
						console.warn(err);
					}
				})
			},
			handleAgreement(idx) {
				this.showAgreement = true;
				switch (idx) {
					case 1:
						this.popTitle = "合规使用手机卡告知书";
						this.popContent = gaozhi;
						break;
					case 2:
						this.popTitle = "中国电信用户入网协议";
						this.popContent = ruwang;
						break;
					case 3:
						this.popTitle = "关于客户个人信息收集、使用规则的公告";
						this.popContent = xinxi;
						break;
					default:
						break;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.css-tag {
		color: #3B7CFA;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		line-height: 30px;
		padding: 10px 10px;
		margin: 0px 12px;
		background-color: #fff;
		border-radius: 10px;
		// -webkit-text-stroke: 1px #fff;

	}

	.css-content {
		border-color: #fff;
		border-width: 2px;
		border-style: solid;
		padding: 20px;
		margin: 10px;
		border-radius: 20px;
	}

	.pop-agreement {
		background-color: white;
		width: 340px;
		padding: 30px 20px;
		border-radius: 10px;
		overflow: hidden;

		.title {
			width: 100%;
			text-align: center;
			font-size: 16px;
			font-weight: bold;
			height: 40px;
			line-height: 40px;
			color: #333;
		}

		.content {
			font-size: 14px;
			line-height: 20px;
			color: #666;
			overflow: scroll;
			height: 400px;
			white-space: pre-wrap;
		}
	}

	.css-submit {
		position: fixed;
		bottom: 20px;
		width: 200px;
		height: 44px;
		line-height: 44px;
		background-color: #D72743;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		left: calc(50% - 100px);
		border-radius: 8px;
		color: white;
		animation-name: scaleAnimation; // 动画名
		animation-duration: 2s; // 动画时长
		animation-iteration-count: infinite; // 永久动画
		transition-timing-function: ease-in-out; // 动画过渡

	}

	@keyframes scaleAnimation {

		// 动画设置
		0% {
			transform: scale(1);
		}

		25% {
			transform: scale(1.08);
		}

		50% {
			transform: scale(1);
		}

		75% {
			transform: scale(1.08);
		}
	}


	.css-back {
		position: fixed;
		top: 20px;
		right: 20px;
		width: 44px;
		height: 44px;
		border-radius: 22px;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 20px;
		backdrop-filter: blur(2px);
		background-color: rgba(255, 255, 255, 0.112);
		box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px;
		border: 2px rgba(255, 255, 255, 0.4) solid;
		border-bottom: 2px rgba(40, 40, 40, 0.35) solid;
		border-right: 2px rgba(40, 40, 40, 0.35) solid;

	}

	.pop-box {
		background-color: white;
		width: 320px;
		height: 85vh;
		padding: 30px 20px;
		border-radius: 10px;
		overflow: scroll;

		.pop-btn {
			width: 200px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			margin-left: calc(50% - 100px);
			background-color: #D72743;
			color: white;
			font-size: 16px;
			font-weight: bold;
			border-radius: 20px;
			margin-top: 20px;
		}
	}

	.css-agreement {
		position: relative;
		line-height: 20px;
		width: 100%;
		padding: 0px;
		margin-top: 10px;
	}

	.css-img {
		position: absolute;
		height: 20px;
		width: 20px;
	}

	.css-check {
		color: rebeccapurple;
	}

	.css-text {
		font-size: 12px;
		color: #333;
		height: 20px;
		line-height: 20px;
	}
</style>